<template>
  <div class="record">
    <div class="record-title">战绩</div>
    <div class="name">用户</div>
    <div class="size">积分</div>
    <div class="kill">击杀</div>
    <div class="name" v-for="(record,recordIndex) in recordList" :key="recordIndex">
      {{ record.username }}
    </div>
    <div class="size" v-for="(record,recordIndex) in recordList" :key="recordIndex">
      {{ record.size }}
    </div>
    <div class="kill" v-for="(record,recordIndex) in recordList" :key="recordIndex">
      {{ record.times_kill }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'Record',
  props: {
    id: String, // 查询ID
  },
  data() {
    return {
      recordList: [], // 成绩列表
    };
  },
  async mounted() {
    await this.getRecordList(); // 加载成绩数据
  },
  methods: {
    // 获取成绩列表
    getRecordList() {
      this.axios
      .post("http://" + window.location.hostname + ":14000/cola/record_query/", {space_id: this.id})
      .then((res) => {
        let result = res.data;
        console.log(result);
        if (result.code == 0) {
          this.recordList = result.data;
        } else {
          console.log(result.msg);
        }
      });
    }
  }
}
</script>

<style scoped lang="scss">


/**成绩 */
.record {
  background-color: gray;
  text-align: center;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-flow: row dense;
}

.record div {
  color:orange;
}

.record-title {
  grid-column-start: 1;
  grid-column-end: 12;
}

.record .name {
  grid-column-start: 1;
  grid-column-end: 4;
}

.record .size {
  grid-column-start: 5;
  grid-column-end: 8;
}

.record .kill {
  grid-column-start: 9;
  grid-column-end: 12;
}
</style>
